<template>
  <div>
    <Row :gutter="24">
      <i-col span="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" class="header_icon" style="height: 90px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p >{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 20px;">  
      <i-col span="16">
        <Card shadow >
          <p class="title">陕西省2017年公务用车情况统计图</p>
          <chart-bar class="chart_bar" :barData = "barData" text=""/>
        </Card>
      </i-col>
        <i-col span="8">
        <Card shadow>
           <p class="title">各类公务用车占比(%) </p>  
            <Tabs value="name1" class="tab_order"  type="card"> 
                <TabPane label="订单数" name="name1">
                    <chart-pie  style="height: 312px;" :value="pieData1" text=""></chart-pie>
                </TabPane>
                <TabPane label="车辆数" name="name2">
                    <chart-pie  style="height: 312px;" :value="pieData2" text=""></chart-pie>
                </TabPane>
            </Tabs> 
        </Card>
      </i-col>
    </Row>
     <Row :gutter="24" style="margin-top: 20px;">  
      <i-col span="12">
        <Card shadow >
          <p class="title">2016-2017公务用车年车辆增长条形图</p>
          <bar-strip class="chart_bar" :barData = "barData" text=""/>
        </Card>
      </i-col>
      <i-col span="12">
          <Card shadow >
            <p class="title">陕西省2017年公务用车情况统计图</p>
            <bar-strip class="chart_bar" :barData = "barData" text=""/>
          </Card>
        </i-col>
     </Row>
    <Row style="margin-top: 20px;">
      <Card shadow>
        <example style="height: 320px;"/>
      </Card>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie,  ChartBar ,BarStrip} from '_c/charts'
import Example from './example.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    BarStrip,
    Example
  },
  data () {
    return {
      className1:true,
      className2:false,
      seen:false,
      inforCardData: [
        { title: '总车辆数(台)', icon: 'md-person-add', count: 45000, color: '#FF634D' },
        { title: '总订单数(个)', icon: 'md-locate', count: 6500, color: '#78D6E2' },
        { title: '总用车成本（元）', icon: 'md-help-circle', count:68000, color: '#84CE3D' },
        { title: '维修总费用(元)', icon: 'md-share', count: 120000, color: '#A488DC' },
        { title: '加油总费用(元)', icon: 'md-chatbubbles', count: 12, color: '#FFC933' },
      ],
      pieData1: [
        {value: 335, name: '一般公务'},
        {value: 310, name: '综合执法'},
        {value: 234, name: '执法执勤'},
        {value: 135, name: '其他'},
      ],
        pieData2: [
        {value: 269, name: '一般公务'},
        {value: 150, name: '综合执法'},
        {value: 100, name: '执法执勤'},
        {value: 50, name: '其他'},
      ],
      barData:{
        color:[  "#78D6E2","#FFC933","#ff9900","#E46CBB","#9A66E4","#ed3f14"],
        barxAxisData:['省本级', '西安市', '咸阳市', '宝鸡市','铜川市','渭南市','延安市','榆林市','汉中市','安康市','商洛市'],
        baryAxisData:[ 
        {
            name:'车辆数（台）',
            type:'bar',
             barMaxWidth: '20', 
           data: [49, 71, 106, 129, 144, 176, 135, 148, 216, 200,194] },
        {
            name:'订单数（个）',
            type:'bar',
            barMaxWidth: '20', 
            yAxisIndex: 1,
           data: [7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 2],
        },
      ]
      }
    }
  },
  methods:{
    toggle(n){
      



    }
  },
  mounted () {
    //
  }
}
</script>

<style lang="less">
ul,li{
  margin:0;
  padding:0;
}
.pie_list{
  width:100%;
  height:360px;
  overflow:hidden;
}
.pie_list li{
  list-style:none;
  width:100%;
  height:360px;
  overflow:hidden;
  float:left;
}
.pie_list li.active{
  display:none;
}
.count-style{
  font-size: 26px;
  font-weight:bolder;
}
.header_icon{
width:19.99%!important;
}
p{
  font-size:16px;
}
.chart_bar{
  height:360px;
  width:110%;
  margin-left:-5%;
}
.title{
  font-weight:bolder;
  padding-bottom:10px;
  color:#666;
  border-bottom:solid 1px #f5f5f5;
  margin-bottom:20px;
}
.tab{
  float:right;
}
.tab a{
  width:auto;
  padding:0 10px;
  height:28px;
  line-height:28px;
  border:solid 1px #ddd;
  margin-right:10px;
  font-size:14px;
  text-align:center;
  border-radius:4px;
  display:block;
  float:left;
}
.tab a.active{
  background-color:#FF634D;
  color:#fff;
  border:solid 1px #FF634D;
}
.show{
  display:block;
}
.hide{
  display:none;
}
.tab_order .ivu-tabs-bar{
  border-bottom:none;
}
.tab_order .ivu-tabs-bar .ivu-tabs-tab-active{
  background-color:#FF634D!important;
  color:#fff!important;
  border-radius:4px!important;
  border:solid 1px #FF634D!important;
   border-bottom:solid 1px #FF634D!important;
}
.tab_order .ivu-tabs-bar .ivu-tabs-tab{
 border-radius:4px!important;
 border-bottom:solid 1px #dcdee2!important;
}
</style>
